<template>
  <div> 
    <div style="width:100%;height:5px;background-color:#F8F8F8"></div>
    
    <div class="a">
      <div class="one">
        <span style="font-size: 13px;font-weight: bold;">{{detailInfo.userName}}</span>
        <span
          style="margin-left: 20px;font-size: 13px;font-weight: bold;"
        >{{formatTel(detailInfo.phonenumber)}}</span>
        <div>
          <span style="font-size: 13px;font-weight:">{{detailInfo.address}}</span>
        </div>
      </div>
    </div>
    <div class="b">
        <div class="b_1">
          <img :src="detailInfo.goodsImage" alt />
        </div>
        <div class="b_2">
          <div class="b_21">{{detailInfo.comName}}</div>
          <div class="b_22">数量 X{{detailInfo.goodsCount}}</div>
        </div>
        <div class="b_3" v-if="isSeller" @click="Buyer">联系买家&nbsp;&nbsp;</div>
      </div>
      <div style="width:100%;height:2px;background-color:#F8F8F8"></div>
    <div class="c" v-if="isBuyer">
        <div class="c_item">
          <div>卖家昵称</div>
          <div>{{detailInfo.snickName}}</div>
        </div>
        <div class="c_item">
          <div>卖家账号</div>
          <div>{{detailInfo.suserName}}</div>
        </div>
        <div class="c_item">
          <div>订单编号</div>
          <div>{{detailInfo.ordersSn}}</div>
        </div>
        <div class="c_item" style="margin-bottom: 30px;">
          <div>交易时间</div>
          <div>{{detailInfo.ordersCreateTime}}</div>
        </div>
    </div>
    <div class="c" v-if="isSeller">
        <div class="c_item">
          <div>买家昵称</div>
          <div>{{detailInfo.nickName}}</div>
        </div>
        <div class="c_item">
          <div>买家账号</div>
          <div>{{detailInfo.userName}}</div>
        </div>
        <div class="c_item">
          <div>订单编号</div>
          <div>{{detailInfo.ordersSn}}</div>
        </div>
        <div class="c_item" style="margin-bottom: 30px;">
          <div>交易时间</div>
          <div>{{detailInfo.ordersCreateTime}}</div>
        </div>
    </div>
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
		userId:'',
		ordersId:'',
	};
  },
  props: ["detailInfo", "expressDetail", "isBuyer", "isSeller", "addressSite"],
  methods: {
    formatStr(str) {
      if (str) {
        let len = str.length - 1;
        let str1 = str.substring(0, 2);
        for (var i = 0; i < len; i++) {
          str1 = str1 + "*";
        }
        return str1;
      } else {
        return "";
      }
    },
    formatTel(str) {
      if (str) {
        let str1 = str.substring(0, 3);
        let str2 = str.substring(7, 11);
        return str1 + "****" + str2;
      } else {
        return "";
      }
    },
    getExpress() {
      let that = this;
      this.$Axios2
        .Get(this.url2 + "/" + this.ordersId + "/" + this.userId)
        .then(function(res) {
          that.expressDetail = res.data.ordersExpressInfo;
        });
    },
    Buyer(){
		this.getIm(this.goodsId,this.nickName,this.buyerId,this.sellerId,this.goodsCoverUrl,this.avatar,this.ordersId);
	},
  },
  mixins: [publicFun], //混入
  mounted() {}
};
</script>

<style scoped="">
.b {
  display: flex;
  padding: 15px;
}
.one {
  padding: 15px;
  line-height: 25px;
  color: #333333;
  font-family: PingFang SC;
  /* border-bottom: 1px solid #f8f8f8; */
}
.two {
  display: flex;
  padding: 15px;
  color: #999999;
  font-family: PingFang SC;
  border-bottom: 1px solid #f8f8f8;
}
.b_1 img {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 5px;
}
.b_2 {
  flex: 1;
  padding: 0 20px 0 10px;
}
.b_21 {
  font-size: 14px;
  display: -webkit-box;
  font-weight: bold;
  opacity: 0.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.b_22 {
  color: #ccc;
  margin-top: 5px;
}
.b_3 {
  color: #3296fa;
  font-size: 14px;
  margin-top: 3%;
  line-height: 20px;
}
.b_33 {
  float:right;
  color: #3296fa;
  font-size: 14px;
  margin-top: -7%;
  line-height: 20px;
}
.a {
  padding: 10px;
  border-top: 1px solid #f5f3f5;
  border-bottom: 1px solid #f5f3f5;
}
.c {
  /* margin-bottom: 10px; */
  padding: 10px 15px;
}
.c_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #aaa;
  font-size: 12px;
}
.c_item1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  color: #333;
  font-size: 13px;
  font-weight: bold;
}
</style>